<template>
    <base-card style="width: 100%;">
        <div class="topPackage">
            <div class="topRectangle"></div>
            <span class="org-texet">机构管理</span>
        </div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
            <el-input v-model="input.value" style="width: 376px; height: 40px;  --el-text-color-placeholder: #999999;"
                placeholder="请输入关键字" :suffix-icon="Search" size="large" clearable />

            <div>
                <el-button type="primary" @click="$router.push('/data/organization/add')">新增机构</el-button>
                <el-button type="primary" plain>导出</el-button>
            </div>
        </div>
        <!-- 下面的 -->
        <el-table :data="organizationData.rows" style="width: 100% ; margin-bottom: 20px;" class="Organization-text">
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column label="编号" property="_id" width="120">
                <template #default="scope">{{ scope.row.date }}</template>
</el-table-column> -->
            <el-table-column property="_id" label="编号" width="120" />
            <el-table-column property="image" label="机构图片" width="120px">
                <template #default="scope">
                    <el-image :src="scope.row.image" style="width: 100%;height: 100%;"></el-image>
                </template>
            </el-table-column>
            <el-table-column property="name" label="机构名称" width="240" show-overflow-tooltip />
            <el-table-column property="contacts" label="负责人姓名" />
            <el-table-column property="phone" label="电话" />
            <el-table-column property="address" label="机构地址" />
            <el-table-column property="state" label="状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0"
                        @change="updateOrganizations(scope.row)" style="--el-switch-on-color: #13ce66;" active-text="启动"
                        inline-prompt inactive-text="禁用" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="toUpdate(scope.row?._id)">编辑</el-button>
                    <el-button link type="danger" @click="OrganDelete(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex-end" style="margin-top: 22px; display: flex; justify-content: flex-end;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 50, 100]" background :total="organizationData.total"
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </base-card>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { deleteOrganizationsApi, findOrganizationsApi, updateOrganizationsApi } from '@/api/organization';
import { useRouter } from 'vue-router';

const router = useRouter();
const input = ref({});
const pageData = ref({ currentPage: 1, pageSize: 10 });
const toUpdate = (_id) => {
    router.push(`/data/organization/update/${_id}`)
}
const organizationData = reactive({
    rows: [],
    total: 0
});
onMounted(() => {
    findOrganizations()
});
watch([pageData, input], () => {
    findOrganizations()
}, { deep: true })
async function findOrganizations() {
    const res = await findOrganizationsApi({
        ...pageData.value,
        ...input.value
    })

    if (res.code == 200) {
        organizationData.rows = res.data.rows;
        organizationData.total = res.data.total;

    }

};
async function updateOrganizations(update) {
    const res = await updateOrganizationsApi(update)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '修改成功'

        })
    } else {
        ElMessage.error(res.message)
    }
    findOrganizations()
}
async function OrganDelete(_id) {
    const res = await deleteOrganizationsApi({ _id })
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'

        })
    } else {
        ElMessage.error(res.message)
    }
    findOrganizations()
}
</script>

<style scoped>
.org-texet {
    padding-bottom: 10px;
}

.topPackage {
    display: flex;
    margin-bottom: 20px;

    span {
        font-weight: 500;
        font-style: normal;
        font-size: 18px;
        color: rgba(51, 51, 51, 0.898039215686275);

    }
}

.el-image__inner {
    height: 100%;
    width: 100%;

}

.topRectangle {
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    margin-top: 4px;
    margin-right: 10px;
}

.buttonColor {
    color: #1877F2;
}
</style>
